<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>WebGPU Samples</title>
    <meta
      name="description"
      content="The WebGPU Samples are a set of samples demonstrating the use of the WebGPU API."
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <link
      href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap"
      rel="stylesheet"
    />
    <link
      rel="icon"
      type="image/x-icon"
      href="favicon.ico"
    />

    <link href="css/styles.css" rel="stylesheet">

  </head>
  <script defer type="module" src="main.js"></script>
  <body>
    <div class="wrapper">
      <nav class="panel container">
        <h1>
          <a href="./">WebGPU Samples</a>
        </h1>
        <input type="checkbox" id="menuToggle">
        <label class="expand" for="menuToggle"></label>
        <div class="panelContents">
          <search>
            <hr />
            <label>
              <svg
                width="24px"
                height="24px"
                viewBox="0 0 1024 1024"
                class="icon"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
              >
                <title>Search</title>
                <path
                  d="M448 768A320 320 0 1 0 448 128a320 320 0 0 0 0 640z m297.344-76.992l214.592 214.592-54.336 54.336-214.592-214.592a384 384 0 1 1 54.336-54.336z"
                  fill="currentColor"
                />
              </svg>
              <input type="search" name="search" />
            </label>
            <hr />
          </search>
          <a href="https://github.com/webgpu/webgpu-samples">
              Github
          </a>
          <hr>
          <div id="samplelist"></div>
        </div>
      </nav>

      <main>
        <div id="intro">
          <p>
            The WebGPU Samples are a set of samples and demos demonstrating the use
            of the <a href="//webgpu.dev">WebGPU API</a>. Please see the current
            implementation status and how to run WebGPU in your browser at
            <a href="//webgpu.io">webgpu.io</a>.
          </p>
        </div>
        <div id="sample" style="display: none;">
          <div class="sampleInfo">
            <h1 id="title"></h1>
            <a id="src" target="_blank" rel="noreferrer" href="">View source!</a>
            &mdash; <a id="standalone" target="_blank" rel="noreferrer" href="">View as standalone webpage</a>
            <p id="description"></p>
          </div>
          <div class="sampleContainer"></div>
        </div>
        <nav id="code" class="sourceFileNav">
          <div class="sourceLR" id="sourceL">&lt;</div>
          <div id="sourceTabs" class="sourceFileScrollContainer">
            <ul id="codeTabs"></ul>
          </div>
          <div class="sourceLR" id="sourceR">&gt;</div>
        </nav>
        <div id="sources"></div>
      </main>
    </div>
  </body>
</html>
